<template>
  <div class="reply-box" v-if="show">
    <div class="box-normal">
      <div class="title">
        <span style="font-weight: 600">发布评论</span>
      </div>
      <div class="prompt">
        <svg-icon :size="12" style="margin-right: 5px" name="badge"/>
        <span>友善交流、尊重他人、遵守法律、禁止恶意攻击和不恰当内容。</span>
      </div>
<!--      <div class="info-content">-->
<!--        <div class="item">-->
<!--          <div style="display: flex;align-items: center">-->
<!--            <img style="width: 40px;height: 40px;border-radius: 5px" :src="commentForm.avatar">-->
<!--            <div class="item">-->
<!--              <span>昵称</span>-->
<!--              <a-input/>-->
<!--&lt;!&ndash;              <a-tooltip effect="dark" content="输入qq号自动获取昵称和头像" placement="top">&ndash;&gt;-->
<!--&lt;!&ndash;                <a-input  @keydown.enter="getUserInfo(commentForm.nickName)" &ndash;&gt;-->
<!--&lt;!&ndash;                          @blur="getUserInfo(commentForm.nickName)" &ndash;&gt;-->
<!--&lt;!&ndash;                          v-model="commentForm.nickName" placeholder &ndash;&gt;-->
<!--&lt;!&ndash;                          class="m_input" &ndash;&gt;-->
<!--&lt;!&ndash;                          placeholder="昵称（必填）"/>&ndash;&gt;-->
<!--&lt;!&ndash;              </a-tooltip>&ndash;&gt;-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="item">-->
<!--          <span>邮箱</span>-->
<!--          <input  v-model="commentForm.email"  class="m_input" placeholder="输入邮箱（必填）"/>-->
<!--        </div>-->
<!--        <div class="item">-->
<!--          <span>网址</span>-->
<!--          <input  v-model="commentForm.webSite"  class="m_input" placeholder="输入你的博客地址"/>-->
<!--        </div>-->
<!--      </div>-->
      <div>
        <a-textarea v-model:value="commentForm.commentContent"
                    placeholder="输入点什么吧！"
                    allow-clear />
<!--        <textarea v-model="commentForm.commentContent"-->
<!--                  placeholder="输入点什么吧！"-->
<!--                  class="reply-ipt reply-box-textarea"-->
<!--                  style="width: 100%" />-->
      </div>
    </div>
    <div class="box-expand">
      <div @click="sead">
         <a-button :loading="sendActive" type="primary">发布</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import {isEmpty, isExternal, validEmail} from "../../utils/validate";
import {addComment} from "../../api/comment"
import {message} from "ant-design-vue";

export default {
  name: "replyBox",
  data(){
    return{
      nickname: "",
      sendActive: false,
      commentContent: "",
      commentForm: {
        typeId: this.typeId,
        commentType: this.commentType,
        parentId: this.parentId,
        replyId: this.replyId,
        toUid: this.toUid,
        // toNickName: this.toUid,
        commentContent:  "",
        // avatar: sessionStorage.getItem("c_avatar") || '',
        // nickName:sessionStorage.getItem("c_nickName") || '',
        // email:sessionStorage.getItem("c_email") || '',
        // webSite:sessionStorage.getItem("c_webSite") || '',

      }
    }
  },
  computed:{
  },
  methods:{
    sead(){
      if(isEmpty(this.commentForm.commentContent)){
        message.info("回复内容不能为空");
        return;
      }

      if(this.commentForm.commentContent.length > 120){
        message.info("回复内容不能超过120个字符");
        return;
      }

      this.sendActive = true;
      addComment(this.commentForm).then(res=>{
        message.success("回复成功！");
        this.$emitter.emit('addComment', res.data)
      }).finally(() => {
        this.sendActive = false;
      })
      this.commentForm.commentContent = ""
    }
  },
  props:{
    //评论类型 1:文章评论 2：友联评论
    commentType: {
      type: Number,
      default:1
    },
    show: {
      type: Number,
      default: 0,
    },
    typeId: {
      type: String,
      default:"0"
    },
    //父评论
    parentId:{
      type:String,
      default: "0"
    },
    //根评论
    replyId:{
      type:String,
      default:"0"
    },
    //回复谁
    toUid:{
      type:String,
      default:""
    }
  },

}
</script>

<style lang="scss" scoped>
@mixin flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 评论框 */
.reply-box {
  display: flex;
  flex-direction: column;
  .box-normal{
    .title{
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      span:first-child{
        margin-right: 10px;
      }
    }
    .prompt{
      font-size: 12px;
      line-height: 20px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }

    .info-content{
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      .item{
        font-size: 14px;
        display: flex;
        flex: 1;
        width: 100%;
        flex-direction: column;
        margin: 10px;
        span{
        }
      }
      @media only screen and (max-width: 767px) {
        flex-direction: column;
        flex: 1;
        align-items: flex-start;
      }
    }
    .reply-ipt{
      margin: 10px 0;
      background-image: url(http://image.xlfdeblog.top/blog/dcf648edcee382bef99eedf91a985200.png);
      background-color: #ffffff;
      transition: all 0.25s ease-in-out 0s;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: right top 10px;
      //@include text-color;
      //@include themeify{
      //  background-color: themed("card-color");
      //}
    }
    .reply-box-textarea {
      width: 100%;
      height: 100px;
      box-sizing: border-box;
      border-radius: 6px;
      padding: 5px;
      font-size: 12px;
      line-height: 1.5;
      resize: none;
      outline: none;
      &:focus{
        background-position-y: 105px;
        transition: all 0.25s ease-in-out 0s;
        //@extend .input-focus;
      }
    }
  }
  .box-expand{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}


</style>
